<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Đăng Nhập</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

	<?php
		echo $this->Html->meta('icon');

		echo $this->Html->css('bootstrap.min');
		echo $this->Html->css('fonts');
		echo $this->Html->css('font-awesome/css/font-awesome.min');
		echo $this->Html->css('plugins/gritter/jquery.gritter');

		echo $this->Html->css('themes/style');

		echo $this->fetch('meta');
		echo $this->fetch('css');
		echo $this->fetch('js');
	?>

	<!--[if lte IE 8]>
	<?php echo $this->Html->css('ie-fix'); ?>
	<![endif]-->


    <!--[if lt IE 9]>
   <?php
    	echo $this->Html->script('html5shiv');
    	echo $this->Html->script('respond.min');
    ?>
    <![endif]-->

  </head>

  <body class="login">
	<div id="wrapper">
			<!-- BEGIN MAIN PAGE CONTENT -->

			<div class="login-container">
				<!-- BEGIN LOGIN BOX -->
				<div id="login-box" class="login-box visible">
					<?php echo $this->Session->flash(); ?>
					<p class="bigger-110">
						<i class="fa fa-key"></i> Đăng Nhập
					</p>

					<div class="hr hr-8 hr-double dotted"></div>

					<?php echo $this->Form->create('User');?>
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-key text-gray"></span>
								<?php echo $this->Form->input('User.username', array( 'label' => false, 'div' => false, 'class' => 'form-control', 'placeholder' => 'Nhập tên đăng nhập' ) )?>
							</div>
						</div>
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-lock text-gray"></span>
								<?php echo $this->Form->input('User.password', array( 'label' => false, 'div' => false, 'class' => 'form-control', 'placeholder' => 'Nhập mật khẩu' ) )?>
							</div>
						</div>
						<div class="tcb">
							<button class="pull-right btn btn-default">Đăng Nhập<i class="fa fa-key icon-on-right"></i></button>
							<div class="clearfix"></div>
						</div>



						<div class="space-4"></div>


						<div class="footer-wrap">
							<!--<span class="pull-left">
								<a href="#" onclick="show_box('forgot-box'); return false;"><i class="fa fa-angle-double-left"></i> Forgot password?</a>
							</span>-->

							<div class="clearfix"></div>
						</div>
					</form>
				</div>
				<!-- END LOGIN BOX -->

				<!-- BEGIN FORGOT BOX -->
				<div id="forgot-box" class="login-box">
					<p class="bigger-110">
						<i class="fa fa-key"></i> Quên Mật Khẩu
					</p>

					<div class="hr hr-8 hr-double dotted"></div>

					<form method="post" action="">
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-envelope text-gray"></span>
								<input type="email" class="form-control" placeholder="Email">
								<span class="help-block">Enter your email and to receive instructions</span>
							</div>
						</div>
						<a href="#" class="pull-right btn btn-red">Submit</a>

						<div class="clearfix"></div>

						<div class="footer-wrap">
								<a href="#" onclick="show_box('login-box'); return false;">Back to login <i class="fa fa-angle-double-right"></i></a>
						</div>
					</form>
				</div>
				<!-- END FORGOT BOX -->

				<!-- BEGIN REGISTRATION BOX -->
				<div id="registration-box" class="login-box">
					<p class="bigger-110">
						<i class="fa fa-users"></i> New User Registration
					</p>

					<div class="hr hr-8 hr-double dotted"></div>

					<form method="post" action="">
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-user text-gray"></span>
								<input type="text" class="form-control" placeholder="Full Name">
							</div>
						</div>
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-envelope text-gray"></span>
								<input type="email" class="form-control" placeholder="Email">
							</div>
						</div>
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-key text-gray"></span>
								<input type="text" class="form-control" placeholder="Username">
							</div>
						</div>
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-lock text-gray"></span>
								<input type="password" class="form-control" placeholder="your password">
							</div>
						</div>
						<div class="form-group">
							<div class="input-icon right">
								<span class="fa fa-repeat text-gray"></span>
								<input type="password" class="form-control" placeholder="confirm password">
							</div>
						</div>
						<div class="tcb">
							<label>
								<input type="checkbox" class="tc">
								<span class="labels"> I accept the <a href="#" data-toggle="modal" data-target="#Myterms">Terms of Servcies</a></span>
							</label>
						</div>

						<p><a href="#" class="btn btn-green">Register<i class="fa fa-angle-double-right icon-on-right"></i></a></p>

						<div class="footer-wrap">
								<a href="#" onclick="show_box('login-box'); return false;"><i class="fa fa-angle-double-left"></i> Back to login</a>
						</div>
					<?php echo $this->Form->end( ); ?>
				</div>
				<!-- END REGISTRATION BOX -->
			</div>

			<!-- Modal For Terms and Conditions -->
			<div class="modal fade" id="Myterms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel">Terms & Conditions</h4>
						</div>
						<div class="modal-body">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, itaque, modi, aliquam nostrum at sapiente consequuntur natus odio reiciendis perferendis rem nisi tempore possimus ipsa porro delectus quidem dolorem ad.</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-blue" data-dismiss="modal">I Agree</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


			<!-- END MAIN PAGE CONTENT -->
	</div>


	<?php
		echo $this->Html->script('jquery.min');
		echo $this->Html->script('bootstrap.min');
		echo $this->Html->script('plugins/slimscroll/jquery.slimscroll.min');
		echo $this->Html->script('plugins/pace/pace.min');
		echo $this->Html->script('main');
		echo $this->Html->script('speech-commands');
		echo $this->Html->script('plugins/gritter/jquery.gritter.min');
	?>


	<!-- initial page level scripts for examples -->
	<script type="text/javascript">
		function show_box(id) {
			jQuery('.login-box.visible').removeClass('visible');
			jQuery('#'+id).addClass('visible');
		}
	</script>
  </body>


</html>